<template>
  <div class="sider">
    <div class="sider-title">考试后台</div>
    <div class="sider-operation">
      <n-anchor :show-rail="false" :show-background="true">
        <div class="option">
          <Icon size="40px">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 24 24"
            >
              <circle cx="10" cy="8" r="4" fill="currentColor"></circle>
              <path
                d="M10.67 13.02c-.22-.01-.44-.02-.67-.02c-2.42 0-4.68.67-6.61 1.82c-.88.52-1.39 1.5-1.39 2.53V20h9.26a6.963 6.963 0 0 1-.59-6.98zM20.75 16c0-.22-.03-.42-.06-.63l1.14-1.01l-1-1.73l-1.45.49c-.32-.27-.68-.48-1.08-.63L18 11h-2l-.3 1.49c-.4.15-.76.36-1.08.63l-1.45-.49l-1 1.73l1.14 1.01c-.03.21-.06.41-.06.63s.03.42.06.63l-1.14 1.01l1 1.73l1.45-.49c.32.27.68.48 1.08.63L16 21h2l.3-1.49c.4-.15.76-.36 1.08-.63l1.45.49l1-1.73l-1.14-1.01c.03-.21.06-.41.06-.63zM17 18c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2z"
                fill="currentColor"
              ></path>
            </svg>
          </Icon>
          <n-anchor-link title="管理员" href="#/manage/admin" />
        </div>
        <div class="option">
          <Icon size="40px">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 640 512"
            >
              <path
                d="M208 352c-2.39 0-4.78.35-7.06 1.09C187.98 357.3 174.35 360 160 360c-14.35 0-27.98-2.7-40.95-6.91c-2.28-.74-4.66-1.09-7.05-1.09C49.94 352-.33 402.48 0 464.62C.14 490.88 21.73 512 48 512h224c26.27 0 47.86-21.12 48-47.38c.33-62.14-49.94-112.62-112-112.62zm-48-32c53.02 0 96-42.98 96-96s-42.98-96-96-96s-96 42.98-96 96s42.98 96 96 96zM592 0H208c-26.47 0-48 22.25-48 49.59V96c23.42 0 45.1 6.78 64 17.8V64h352v288h-64v-64H384v64h-76.24c19.1 16.69 33.12 38.73 39.69 64H592c26.47 0 48-22.25 48-49.59V49.59C640 22.25 618.47 0 592 0z"
                fill="currentColor"
              ></path>
            </svg>
          </Icon>
          <n-anchor-link title="老师" href="#/manage/teacher" />
        </div>
        <div class="option">
          <Icon size="40px">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 24 24"
            >
              <path
                d="M12 5.9a2.1 2.1 0 1 1 0 4.2a2.1 2.1 0 0 1 0-4.2m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4s4-1.79 4-4s-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v2c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-2c0-2.66-5.33-4-8-4z"
                fill="currentColor"
              ></path>
            </svg>
          </Icon>
          <n-anchor-link title="学生" href="#/manage/student" />
        </div>
        <div class="option">
          <Icon size="40px">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 576 512"
            >
              <path
                d="M552 64H112c-20.858 0-38.643 13.377-45.248 32H24c-13.255 0-24 10.745-24 24v272c0 30.928 25.072 56 56 56h496c13.255 0 24-10.745 24-24V88c0-13.255-10.745-24-24-24zM48 392V144h16v248c0 4.411-3.589 8-8 8s-8-3.589-8-8zm480 8H111.422c.374-2.614.578-5.283.578-8V112h416v288zM172 280h136c6.627 0 12-5.373 12-12v-96c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v96c0 6.627 5.373 12 12 12zm28-80h80v40h-80v-40zm-40 140v-24c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H172c-6.627 0-12-5.373-12-12zm192 0v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-144v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0 72v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12z"
                fill="currentColor"
              ></path>
            </svg>
          </Icon>
          <n-anchor-link title="考试" href="#/manage/exam"></n-anchor-link>
        </div>
      </n-anchor>
    </div>
  </div>
</template>

<script lang="ts">
import {Icon} from '@vicons/utils'
import { defineComponent } from 'vue'
import { userInfoStore } from '@/store';

export default defineComponent({
  setup() {

    return{

    }
  },
  components:{
    Icon
  }
})
</script>

<style scoped lang="css">
.sider {
  height: 100%;
  width: 100%;
  background-color: #ffffff;
}
.sider-title {
  font-size: 28px;
  color: rgba(25, 138, 250, 1);
  text-align: center;
  padding-top: 20px;
}
.sider-operation {
  margin-top: 20px;
  padding-left: 20px;
}
.option1 {
  width: 60%;
  display: flex;
  justify-content: space-around;
}
.option {
  display: flex;
  margin: 20px 0 20px 0;
}
.n-anchor-link {
  margin: auto 0;
  font-size: 26px;
  font-weight: 600;
}
.n-anchor-link:active {
  color: aqua;
}
</style>
